import React, {useState, useRef} from 'react'
import {message, Tabs, Divider, Popconfirm} from 'antd'
import {PageHeaderWrapper} from '@ant-design/pro-layout'
import ProTable, {ProColumns, ActionType} from '@ant-design/pro-table'
import {connect} from 'umi'
import {getCredentialList, checkCredential, deleteCredential} from '../service'
import moment from 'moment'
import CreateForm from './components/CreateForm'

const  { TabPane } = Tabs;

const TableList = () => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [visible, setVisible] = useState(false);
  const [record, setRecord] = useState(null);
  const [operateType, setOperateType] = useState(null);

  const handleChangTabIndex = (key) => {
    if(key === '0'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  };

  const handleCancel = () => {
    setVisible(false);
    setRecord(null);
  };

  const handleSubmit = (values) => {
    checkCredential(values).then(res => {
      if (res.flag){
        message.success(`${operateType===0?'驳回':'审核'}成功！`)
      }else {
        message.error(res.error);
      }
      setVisible(false);
      actionRef.current.reload();
    })
  };

  const queryDetails = (record,type) => {
    setOperateType(type);
    setVisible(true);
    setRecord(record)
  };

  const delCredential = (id) => {
    deleteCredential(id).then(res => {
      if (res.flag){
        message.success('资质删除成功！')
      }else {
        message.error(res.error)
      }
      actionRef.current.reload();
    })
  };

  const columns = [
    {
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '证书编号',
      hideInSearch: true,
      dataIndex: 'credentialNo',
    },
    {
      title: '职称系列',
      hideInSearch: true,
      dataIndex: 'jobSeries',
    },
    {
      title: '证书级别',
      hideInSearch: true,
      dataIndex: 'credentialLevel',
    },
    {
      title: '资格名称',
      hideInSearch: true,
      dataIndex: 'credentialName',
    },
    {
      title: '授予时间',
      dataIndex: 'startTime',
      hideInSearch: true,
      render: (text) => {
        return moment(text).format('YYYY-MM-DD');
      },
    },
    {
      title: '挂靠状态',
      hideInSearch: true,
      dataIndex: 'hangStatus',
      valueEnum: {
        0: {text: '未审核', status: 'Default'},
        1: {text: '审核中', status: 'Processing'},
        2: {text: '已挂靠', status: 'Success'},
        4: {text: '解除中', status: 'Processing'},
        5: {text: '已解除', status: 'Error'},
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      valueEnum: {
        0: {text: '未审核', status: 'Default'},
        1: {text: '已审核', status: 'Success'},
        2: {text: '拒绝', status: 'Warning'},
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        record.status === 0 ? <>
          <a onClick={() => queryDetails(record, 1)}>审批</a>
          <Divider type="vertical"/>
          <a onClick={() => queryDetails(record, 0)}>驳回</a>
          <Divider type="vertical"/>
          <Popconfirm title="是否要删除此数据？" cancelText='取消' okText='确认' onConfirm={() => delCredential(record.id)}>
            <a>删除</a>
          </Popconfirm></> :
          <a onClick={() => queryDetails(record, 2)}>详情</a>
      ),
    }
  ];

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={handleChangTabIndex}>
        <TabPane tab="待办理" key="0">
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => getCredentialList(params,[0])}
        columns={columns}
      />
        </TabPane>
        <TabPane tab="已办理" key="1">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => getCredentialList(params,[1,2])}
            columns={columns}
          />
        </TabPane>
      </Tabs>
      <CreateForm
        operateType={operateType}
        visible={visible}
        record={record}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />

    </PageHeaderWrapper>
  )
}

export default connect(() => ({}))(TableList)
